﻿<template>
    <div>
        <el-collapse>
            <el-collapse-item title="工种选择" name="1">
                <el-tree :data="data"
                         show-checkbox
                         default-expand-all
                         node-key="id"
                         ref="tree"
                         highlight-current
                         :props="defaultProps" @check="getCheckedNodes">
                </el-tree>
            </el-collapse-item>

        </el-collapse>
    </div>
</template>
 
<script>
    import { getAptitudeTypeList } from '@/api/UserManager'
    export default {
        props: {
            isDisabled: {
                type: Boolean,
                default: true
            }
        },
        watch: {
            isDisabled(val) {
                this.isDis = val;
            }
        },
        data() {
            return {
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'aptitudeName'
                },
                query: {
                    AptitudeName: ''
                },
                treeselectlist: [],
                proplist: [],
                isDis: this.isDisabled

            };
        },
        created() {
            this.getAptitudetypeTree()
        },
        mounted() {
            //this.$nextTick(function () {//等待dom加载完毕
            //    this.getAptitudetypeTree()
            //});
        },
        methods: {
            loopDisabled(obj) {
                var that = this;
                obj.children.forEach(function (item, index) {
                    item.disabled = true;
                    if (item.children != null) {
                        that.loopDisabled(item);
                    }
                })
            },
            getAptitudetypeTree() {
                this.listLoading = true;
                var that = this;
                getAptitudeTypeList(this.query).then(response => {
                    this.listLoading = false;
                    this.data = response.data;
                    if (this.isDis) {
                        response.data.forEach(function (item, index) {
                            item.disabled = true;
                            if (item.children != null) {
                                that.loopDisabled(item);
                            }
                        })
                        this.data = response.data;
                    }
                },
                    error => {
                        this.listLoading = false
                    })

            },

            getCheckedNodes: function () {
                this.treeselectlist = this.$refs.tree.getCheckedNodes(false, true);
                this.$emit('AptitudetypeNodes', this.treeselectlist);

            },
            //setCheckedNodes  OsetNodecheck
            OsetNodecheck(propslist) {
                //清空选中
                this.$refs.tree.setCheckedKeys([]);

                if (propslist.length > 0) {
                    //  this.$refs.tree.setCheckedKeys(propslist, true);
                    for (var i = 0; i < propslist.length; i++) {
                        this.$refs.tree.setChecked(propslist[i].id, true, false);
                    }
                }
            }
        }
    };
</script>
<style>
.el-collapse-item__header{
font-weight: bold;
font-size: 0.4rem;
padding-left: 0.4rem;
}
</style>